<template>
  <div class="">
    <Header>
      <span slot="middle">歌手信息</span>
    </Header>

    <van-tabs v-model="active">
      <van-tab title="单曲">
        <div
          class="play"
          v-for="item,index in hotsongs"
          :key="item.al.id + Math.random()"
          @click="$router.push(`/musictext/${item.id}`)"
        >
         <span>{{index}}</span> {{ item.name }} <van-icon name="play-circle-o" />
          <van-divider />
        </div>
      </van-tab>
      <van-tab title="MV">
        <div
          class="playmusic"
          v-for="(item, index) in mvs"
          :key="item.id + index"
          @click="$router.push(`/singersongs/${item.id}`)"
        >
          <img :src="item.imgurl" alt="" />
          <div class="right">
            <p>{{ item.name }}</p>
          </div>
        </div>
      </van-tab>
      <van-tab title="专辑">
          <div
          class="playmusic"
          v-for="(item, index) in hotAlbums"
          :key="item.id + index"
          @click="$router.push(`/pinglun/${item.id}`)"
        >
          <img :src="item.picUrl" alt="" />
          <div class="right">
            <p>{{ item.name }}</p>
            <p>{{item.subType}}</p>
          </div>
        </div>
      </van-tab>
      <van-tab title="描述" class="desc">{{ briefDesc }}</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Header from "../../components/NavBar.vue";
import { getuseroneAPI, getUserMv, getplaymainAPI } from "../../api/music";

export default {
  data() {
    return {
      active: 0,
      briefDesc: "",
      hotsongs: [],
      mvs: [],
      hotAlbums:[],
    };
  },
  computed: {},
  watch: {},

  methods: {
    //获取歌手单曲和描述
    async getmusic(id) {
      const result = await getuseroneAPI(id);
      console.log(result);
      this.briefDesc = result.artist.briefDesc;
      this.hotsongs = result.hotSongs;
      console.log(this.hotsongs);
    },
    //获取歌手MV
    async getmvs(id) {
      const result = await getUserMv(id);
      console.log(result);
      this.mvs = result.mvs;
    },
    //获取歌手专辑
    async getmain(id) {
      const result = await getplaymainAPI(id);
      console.log(result);
      this.hotAlbums = result.hotAlbums;
    },
  },
  created() {
    const id = this.$route.params.id;
    this.getmusic(id);
    this.getmvs(id);
    this.getmain(id);
  },
  mounted() {},
  components: {
    Header,
  },
};
</script>
<style scoped>
.play {
    display: flex;
    padding-top:20px ;
    align-items: center;
  
}
.play span{
    width: 50px;
    text-align: center;
    color: rgba(128, 128, 128, 0.61);
}
.playmusic {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.playmusic img {
  display: block;
  width: 100px;
}
.playmusic .right {
  flex: 1;
  padding-left: 10px;
}
.desc {
  padding: 20px;
  font-size: 14px;
}
</style>